<template>
  <pageTabelLayout v-loading="pageData.loadingUp">
    <template #pageHeader>
      <div class="search-form isheader" v-show="pageData.headerShow">
        <a-form size="small" :model="form" layout="inline">
          <!-- <a-form-item label="公司">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.companyName"
            />
          </a-form-item> -->
          <!-- <CorporateSectorCascader
            :configCascader="configCascader"
            @changeCascader="changeCascader"
          /> -->
          <a-form-item label="库存状态">
            <a-select popup-container="html"  :style="{ width: '200px' }" v-model="form.state">
              <a-option :value="0">全部</a-option>
              <a-option :value="1">未出库</a-option>
              <a-option :value="2">已出库</a-option>
              <a-option :value="3">未转移</a-option>
              <a-option :value="4">转移中</a-option>
              <a-option :value="5">转移已接收</a-option>
              <a-option :value="6">未借出</a-option>
              <a-option :value="7">已借出</a-option>
              <a-option :value="8">归还</a-option>
              <a-option :value="9">未报废</a-option>
              <a-option :value="10">已报废</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="单号">
            <a-input :style="{ width: '200px' }" v-model="form.code"></a-input>
          </a-form-item>
          <a-form-item label="物料编号">
            <a-input :style="{ width: '200px' }" v-model="form.materialCode"></a-input>
          </a-form-item>
          <a-form-item label="物料名称">
            <a-input :style="{ width: '200px' }" v-model="form.materialName"></a-input>
          </a-form-item>
          <a-form-item label="固定资产编号">
            <a-input :style="{ width: '200px' }" v-model="form.numberId"></a-input>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="pageData.headerShow" @click="pageData.headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="pageData.headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
        </a-space>
      </div>
    </template>
    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid" @selectionChanged = "selectionisChanged"></encapsulation-agrid>
    </template>
  </pageTabelLayout>
</template>
      
<script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { get, post } from '@/api/http'
import { tableColumns } from './FixedAssetsisposalrecords'
// import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'

import { Search, Delete, CirclePlus, Download } from '@element-plus/icons-vue'
let pageData = reactive<any>({
  showAdd: false,
  type: '',
  loadingUp: false,
  headerShow: true,
  id: '',
})
let query = reactive<any>({
  companyName: '',
  companyID: '',
  mechanicalCode: '',
  mechanicalName: '',
  propertyType: '',
  propertyClasses: '',
  district: '',
  shareYears: '',
  shareType: '',
  joinFactoryTime: '',
  joinMoney: Number,
  mechanicalType: '',
})
const configCascader = ref<{}>({
  corporateWidth: '200px', //公司宽度
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
  const { corporateId, corporateLabel } = data
  form.companyName = corporateLabel
  form.companyID = corporateId
}
const cascaderRef1 = ref()

const configCascader1 = ref<{}>({
  corporateWidth: '67%', //公司宽度
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector', //配置部门不显示
  corporateRquired: true,
  corporateNameLabelWidth: '78px',
})
const changeCascader1 = (data: any) => {
  const { corporateId, corporateLabel } = data
  query.companyName = corporateLabel
  query.companyID = corporateId
}
const selectionisChanged = ()=>{
  console.log(111111888888);
  
}
let form = reactive<any>({
  state: 0,
  code: ''
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/ironwareStockInfoRecord/getPage', //接口路径
  queryData: {
    stockState: '',
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接口
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
  fileName:'FixedAssetsisposalrecords-1'
})
onMounted(() => {
  getList()
})
const getList = () => {
  // refgridOption.value.setQuery({
  //   stockState: form.stockState == 0 ? '' : form.stockState,
  // })
  refgridOption.value.setQuery(form)
}
</script>
<script lang="ts">
export default defineComponent({
  name: 'DeviceTypeAllocationSettings',
})
</script>
<style scoped>
.contioner {
  height: 100%;
}

.contentPrint {
  width: 100%;
  display: flex;
  justify-content: space-between;

  color: #000 !important;
}

.printLeft {
  width: 56%;
}

.printTitle {
  font-size: 22px;
  font-weight: 700;
  margin-top: 20px;
}

.printRight {
  width: 43%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ermPrint {
  display: flex;
  justify-content: center;
  /* flex-flow: column wrap; */
  align-items: center;
}

.erm {
  width: 160px;
  height: 50px;
  background: #999;
}

.formPrint {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ban {
  width: 50%;
  margin-bottom: 5px;
}

.quan {
  width: 100%;
  margin-bottom: 5px;
}

table {
  text-align: center;
  color: #000;
}

td {
  color: #000;
}

th {
  color: #000;
}

.tablePrint {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.footerPrint {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  color: #000;
}

.createTime {
  width: 100px;
}

.printw {
  width: 30%;
  margin-bottom: 5px;
}

:deep(.el-dialog__body) {
  color: #000;
}

.my-tool-bar {
  /* background:#fff; */
  margin: 5px 0 5px 0;
}

.c-header {
  background: #fff;
  padding: 15px 0 10px 0;
}

:deep(.el-input__inner) {
  color: #3b3a3a;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #474849 inset;
}

:deep(.el-form-item__label) {
  color: #202021;
}

:deep(.arco-drawer-container) {
  z-index: 1000 !important;
}
</style>
      